<template>
	<view class="container" @tap="togglePicker(0),bottomHeight='0rpx'">

		<!--内容-->
		<view class="scroll" :style="{bottom:bots}">
			<scroll-view :scroll-into-view="scrollViewId" scroll-y style="height: 100%;" class="sssc"
				:scroll-with-animation="true" :scroll-top="scrtop">
				<view class="item-space"></view>
				<view class="tipsssss">
					
					<text>					当前客服喵喵为体验版本，所有回答仅限参考，不能成为权利主张或申诉依据。</text>
				</view>
				<view class="c6 topsd">
					<view class="tit">
						{{indexinfo.title}}
					</view>
					<view class="tit">
						{{indexinfo.introduce}}
					</view>
					<view class="question" v-for="(item,index) in indexinfo.questions" @click="selsend(item)">
						{{index+1}}. {{item}}
					</view>
				</view>
				<view v-for="(item, index) in list" :key="index">
					<view class="item flex-row" :class="[item.role == '我' ? 'right' : 'left']">
						<view style="display: flex;flex-direction: column;font-size: 22rpx;">
							<image mode="aspectFill" :src="item.headimg" class="face"
								:class="[item.role == '我'  ? 'nomar' : 'yesmar']"></image>
						</view>
						<!--文本-->
						<view class="wraps" :class="[item.role == '我'  ? 'yesss' : 'nosss']">
							<!-- 	<view class="nickname" v-if="item.source!=userId">
								{{item.role}}
							</view> -->
							<view class="content flex-row">
								<rich-text :nodes="item.content"></rich-text>
							</view>

						</view>
					</view>
				</view>
				<view class="empty3">

				</view>

				<view id="bottom"></view>
			</scroll-view>
		</view>
		<!--输入-->
		<view class="oper flex-row" :style="{bottom: bottomHeight}" @tap.prevent.stop="">
			<!-- 语音按钮切换 -->
			<!-- #ifdef APP -->
			<image v-if="isEdit" @tap="toggleEdit(false)" style="margin-right: 20rpx;"
				src="/static/img/voice-circle.png" class="icon" mode="aspectFill"></image>
			<image v-else @tap="toggleEdit(true)" style="margin-right: 20rpx;" src="/static/img/keyboard.png"
				mode="aspectFill" class="icon"></image>
			<!-- #endif -->
			<!--输入录音切换-->
			<input @focus="inputFocus" v-if="mute && isEdit" disabled :focus="isFocus" :cursor-spacing="8"
				:adjust-position="false" type="text" v-model="contents" class="input" placeholder="全体禁言" />
			<input @focus="inputFocus" @blur="initheight" v-if="!mute && isEdit" :focus="isFocus" :cursor-spacing="8"
				type="text" v-model="contents" :disabled="grmute" :adjust-position="isapp" class="input"
				:placeholder="tip" @confirm="send(contents)" />

			<!-- 	<input v-if="isEdit" @focus="inputFocus" :focus="isFocus" :cursor-spacing="8" :adjust-position="false"
				type="text" v-model="content" class="input" placeholder="请输入内容" /> -->
			<!-- 表情 -->
			<!-- 发送 -->
			<view @touchend.prevent="send(contents)" v-show="contents" class="btn">发送</view>
			<view @touchend.prevent="sendtip" v-show="!contents" class="btn" style="opacity: 0.5;">发送</view>
			<!--附件-->

		</view>
		<!--表情-->

		<!--附件-->
		<!--语音-->

	</view>
</template>

<script>
	import {
		myuser
	} from "../../api/user.js"
	import {
		deepseek,
		deepseekindex
	} from '../../api/other'

	export default {

		data() {
			return {
				emojis: [],
				isEdit: true,
				isFocus: false,
				showEmoji: false,
				showFile: false,
				showVoice: false,
				scrollHeight: 'auto', // 内容区域高度
				statusBarHeight: 0, // 状态栏高度
				scrollViewId: '', // 滚动到最底部
				voicePlayingId: '', // 正在播放的消息ID
				contents: '',
				list: [
					// {
					// 	role: "AI",
					// 	content: "",
					// 	headimg:"https://images.fudiemall.com/storage/default/20250110/avatarb612340112b2ae7dfbe76a5b94421aadd016dd5a.png"
					// },
					// {
					// 	role: "user",
					// 	content: "",
					// 	headimg:"https://images.fudiemall.com/storage/default/20250110/avatarb612340112b2ae7dfbe76a5b94421aadd016dd5a.png"
					// },
				],
				socketOpen: false,
				socketMsgQueue: [],
				groupId: '',
				userId: "",
				toUserName: '',
				client: '',
				user: null,
				tit: "福叠猫Deepseek",
				groupname: "",
				groupid: "",
				groupinfo: {},
				mute: 0,
				tip: "给AI喵喵发送消息",
				is_admin: "",
				showReminder: true,
				bottomHeight: "0rpx",
				scrtop: "",
				onVideoSrc: "",
				isapp: false,
				showEmo1: true,
				showEmo2: false,
				isemo: true,
				grmute: false,
				cursor: '',
				open: true,
				displayContent: '',
				currentIndex: 0,
				timer: null,
				indexinfo: {},
				id: "id",
				displayContents: [],
				currentIndices: [],
				timers: [],
				bots: "",
				baseUrl: this.$imageBaseUrl,
			}
		},
		onLoad(option) {
			this.getuser()
			this.getindex()
			this.initScrollBar()
		},
		onHide() {

		},
		onShow() {
			// #ifdef MP-WEIXIN
			this.isapp = true
			// #endif

		},
		onBackPress() {
			if (this.showFile || this.showEmoji) {
				this.showFile = false
				this.showEmoji = false
				this.setScrollHeight(0)
				return true
			}
			return false
		},
		// onNavigationBarButtonTap() {
		// 	this.toPage('/pages/message/group/set?groupId=' + this.groupId)
		// },
		displayedContents() {
			return this.list.map((item, index) => {
				const progress = this.displayProgress[index] || 0;
				return item.content.slice(0, progress);
			});
		},
		methods: {
			getuser() {
				myuser().then(res => {
					this.user = res.data
				})
			},
			selsend(item) {
				// this.content = item
				this.send(item)
			},
			getindex() {
				deepseekindex().then(res => {
					this.indexinfo = res.data
				})
			},
			handleApiResponse(response) {
				// 更新list数组，添加新的消息
				this.list.push(...response);
				// 初始化displayProgress数组
				this.displayProgress = new Array(this.list.length).fill(0);
				// 启动打字机效果
				this.startTypingEffect();
			},
			startTypingEffect() {
				// 设置定时器，每秒增加一个字符的进度
				const timer = setInterval(() => {
					this.list.forEach((item, index) => {
						if (this.displayProgress[index] < item.content.length) {
							this.displayProgress[index]++;
						}
					});
				}, 1000); // 调整速度，1000ms为1秒一个字符
				this.timer = timer;
			},
			// 发送消息
			send(item) {
				console.log(this.contents)
				this.list.push({
					role: "我",
					content: item,
					headimg: this.user.avatar
				}, )
				uni.showLoading({
					title: "正在思考中",
					mask: true
				})
				deepseek({
					chat_id: this.chatid,
					content: item
				}).then(res => {
					this.contents = ''
					if (res.code == 1) {
						uni.hideLoading()
						this.initScrollBar()
						this.chatid = res.data.id
						// this.list.push({
						// 	role: "AI",
						// 	content: res.data.content,
						// 	headimg: "https://images.fudiemall.com/storage/default/20250308/69895672xc47e558d08b8f36f3f3f28b3d051dc4ca919542b.png"
						// }, )
						const aiContent = res.data.content;
						const aiReply = {
							role: "AI喵喵",
							content: '',
							headimg: "https://images.fudiemall.com/storage/default/20250308/69895672xc47e558d08b8f36f3f3f28b3d051dc4ca919542b.png"
						};

						this.list.push(aiReply); // 先添加一个空的AI消息

						let index = 0;
						const typingInterval = setInterval(() => {
							if (index < aiContent.length) {
								const char = aiContent.charAt(index);
								if (char === '\n') {
									aiReply.content += '<br>';
								} else {
									aiReply.content += char;
								}
								index++;
								// 刷新视图
								this.$forceUpdate();
							} else {
								clearInterval(typingInterval);
							}
						}, 100); // 调整数字以改变打字速度
					}

					console.log(res, "发送")
				})
			},



			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			// 初始化滚动
			initScrollBar() {
				setTimeout(() => {
					this.scrollViewId = ''
					setTimeout(() => {
						this.scrollViewId = 'bottom'
						setTimeout(() => {
							this.scrollViewId = ''
						}, 100)
					}, 100)
				}, 100)
			},
			// 监听输入聚焦
			inputFocus(e) {


				// #ifdef APP

				// #endif
				// this.bots = "0rpx"
				console.log(e.currentTarget.offsetTop)
				// #ifdef H5
				this.bottomHeight = "0rpx"
				// #endif


				// this.setScrollHeight(e.detail.height)
				uni.onKeyboardHeightChange(res => {
					// this.bottomHeight = (res.height) + "rpx";
					this.setScrollHeight(res.height)
					this.initScrollBar()

				})
				this.initScrollBar()
			},
			// 设置scroll的高度
			setScrollHeight(descHeight = 0) {
				// #ifdef MP-WEIXIN
				this.scrollHeight = `calc(100vh - 110rpx - ${descHeight}px)`
				// #endif
				// #ifdef APP-PLUS
				this.scrollHeight = `calc(100vh - 88upx - ${descHeight}px)`
				// #endif
				// #ifdef H5
				this.scrollHeight = `calc(100vh - 88rpx - ${descHeight}px)`
				// #endif
			},
			initheight() {
				this.bottomHeight = "0rpx"
			},
			// 切换选择
			togglePicker(height = 0, type = '') {


				let status = height > 0 ? true : false

				switch (type) {
					case 'emoji':
						this.bottomHeight = "340rpx"
						this.showEmoji = status;
						break
					case 'file':
						this.bottomHeight = "152rpx"
						this.showFile = status;
						break
				}
				this.isEdit = true

				setTimeout(() => {
					// this.setScrollHeight(0)
					this.initScrollBar()
				}, 50)
			},
			sendtip() {
				uni.$u.toast("请输入内容")
			},
			// 切换语音与编辑
			toggleEdit(bool) {
				this.isEdit = bool
				this.isFocus = bool
				this.setScrollHeight(0)
			},

			// 预览图片
			preview(url) {
				uni.previewImage({
					urls: [url]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-navbar__content__right__text {
		color: #FFFFFF;
	}

	/deep/.u-navbar__content__title {
		width: 400rpx;
		font-size: 28rpx !important;
	}

	.container {
		position: relative;
		height: 100vh;
		// background-color: #FFF;
		// height: calc(100vh - 88upx);
		overflow: hidden;
		background-color: #F3F3F3;
	}

	/* #ifdef H5 */
	.container {
		position: relative;
		// height: calc(100vh - 48upx);
		height: 96vh;
		background-color: #F3F3F3;
	}

	/* #endif */

	.status_bar,

	.header,
	.emoji,
	.file {
		background-color: #F3F3F3;

	}

	.status_bar {
		// background-color: green;
	}

	.header {
		// background-color: #A0EA6F;
		border-bottom: 2upx solid #EEE;

		.center {
			font-weight: bold;
		}
	}

	.map {
		width: 60%;
		height: 300upx;
		background-color: #FFF !important;

		&::before {
			border-right: 30upx solid #FFF !important;
		}

		.title {
			height: 80upx;
			font-size: 28upx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.box {
			width: 100%;
			height: 170upx;
			margin-top: 10upx;
		}
	}

	.emoji {
		width: 750rpx;
		height: 360upx;
		padding: 0 0 20upx 20upx;
		position: absolute;
		bottom: 0rpx;
		z-index: 21;
		padding-top: 40rpx;
		background-color: #F3F3F3;

		// background-color: yellow;
		.list {
			width: 100%;
			height: 400upx;
			padding: 20upx 0;
			overflow-y: auto;
			padding-bottom: 160rpx;

			.item {
				float: left;
				display: block;
				height: 60upx;
				line-height: 60upx;
				width: calc(100% / 12);
				margin-right: 20upx;
			}
		}
	}

	.file {
		width: 750rpx;
		padding: 30upx 20upx;
		position: absolute;
		z-index: 20;
		bottom: 0rpx;
		padding-bottom: 20rpx;

		// background-color: #000;
		.list {
			display: flex;
			overflow: hidden;
			padding-left: 10upx;
			justify-content: flex-start;

		}

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 110upx;
			height: 110upx;
			border-radius: 10upx;
			margin-right: 40upx;
			background-color: #FFF;

			.icon {
				width: 50upx;
			}

			.text {
				font-size: 24upx;
				margin-top: 4upx;
			}
		}
	}

	.oper {
		width: 750rpx;
		height: 130upx;
		padding: 0 20upx;
		box-sizing: border-box;
		border-top: 2upx solid #EEE;
		border-bottom: 2upx solid #EEE;
		background-color: #dedede;
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		position: absolute;
		bottom: 0rpx;
		z-index: 10;

		.input {
			height: 68upx;
			line-height: 68upx;
			padding: 0 20upx;
			font-size: 28upx;
			border-radius: 10upx;
			background-color: #fff;
			// width: calc(100% - 120upx - 20upx - 40upx - 60upx);
			width: 530rpx;
			margin-left: 20rpx;
		}

		.icon {
			width: 60upx;
			height: 60upx;
			margin-left: 20rpx;
		}

		.btn {
			color: #fff;
			width: 90upx;
			height: 52upx;
			font-size: 24upx;
			line-height: 52upx;
			text-align: center;
			border-radius: 10upx;
			background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
			margin-left: 20rpx;
		}
	}

	.scroll {
		position: absolute;
		// bottom: 0rpx;
		width: 750rpx;
		// background-color: red;
		overflow-y: auto;
		transition: all 0.1s ease;
		// height: 1600rpx;
		// height: 1500rpx;
		// height: calc(100vh- var(--status-bar-height));
		height: 100vh;
		// height: calc(100vh - 88upx - 200upx - var(--status-bar-height));
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - 88upx - var(--status-bar-height));
		/* #endif */

		.item-space {
			height: 30upx;
		}

		.time {

			color: #666;
			font-size: 24upx;
			text-align: center;
			margin-bottom: 20upx;
		}

		.cancel {
			width: 100%;
			height: 40upx;
			text-align: center;
			margin-bottom: 30upx;

			.text {
				color: #999;
				font-size: 24upx;
			}
		}

		.item {
			display: flex;
			margin: 0 30upx 30upx;
			align-items: flex-start;
			justify-content: flex-start;

			.face {
				margin-top: 40rpx;
				width: 80upx;
				height: 80upx;
				border-radius: 20upx;
			}

			.content {
				color: #000;
				font-size: 32upx;
				min-height: 80upx;
				border-radius: 10upx;
				padding: 20upx 24upx;
				background-color: #fff;
				word-break: break-all;
				word-wrap: break-word;
				// max-width: calc(100% - 100upx - 120upx);
				max-width: 600rpx;
				position: relative;
				text-align: justify;
				margin-top: 30rpx;

				&::before {
					content: '';
					width: 0;
					height: 0;
					border-right: 30upx solid #FFF;
					border-top: 20upx solid transparent;
					border-bottom: 20upx solid transparent;
					position: absolute;
					top: 24upx;
				}

				.voice-icon {
					width: 32upx;
					height: 40upx;
					margin-right: 180upx;
					margin-bottom: -8upx;
				}
			}

			&.left {
				text-align: left;

				.face {
					margin-right: 30upx;

				}

				.content::before {
					left: -20upx;
				}
			}

			&.right {
				flex-direction: row-reverse;
				text-align: right;

				.face {
					margin-top: 30rpx;
					margin-left: 30upx;
				}

				.content {
					background-color: #A0EA6F;

					&::before {
						right: -20upx;
						transform: rotate(180deg);
						border-right: 30upx solid #A0EA6F;
					}

					.voice-icon {
						margin-right: 0;
						margin-left: 180upx;
						transform: rotate(180deg);
					}
				}
			}
		}

		#bottom {
			height: 200rpx;
		}
	}

	/* #ifdef H5 */
	.wraps {
		display: flex;
		width: 400rpx;
		align-items: self-end;
		flex-direction: column;

		.content {
			color: #000;
			font-size: 32upx;
			min-height: 80upx;
			border-radius: 10upx;
			padding: 20upx 24upx;
			background-color: #fff;
			word-break: break-all;
			word-wrap: break-word;
			max-width: calc(100% - 100upx - 120upx);
			position: relative;


		}

		>video {
			position: relative;
			z-index: 2;
		}
	}

	.yesss {
		align-items: self-end;
	}

	.nosss {
		align-items: start
	}

	/* #endif */
	/* #ifdef MP-WEIXIN */
	.wraps {
		display: flex;
		width: 400rpx;

		.content {

			color: #000;
			font-size: 32upx;
			min-height: 80upx;
			border-radius: 10upx;
			padding: 20upx 24upx;
			background-color: #fff;
			word-break: break-all;
			word-wrap: break-word;
			max-width: calc(100% - 100upx - 120upx);
			position: relative;


		}

		>video {
			position: relative;
			z-index: 2;
		}
	}

	.yesss {
		display: flex;
		justify-content: flex-end;
		align-items: self-end !important;
	}

	.nosss {
		align-items: self-end;
		flex-direction: column;
		// align-items: start !important;
	}

	/* #endif */
	/* #ifdef MP-ALIPAY */
	.wraps {
		display: flex;
		width: 400rpx;

		.content {

			color: #000;
			font-size: 32upx;
			min-height: 80upx;
			border-radius: 10upx;
			padding: 20upx 24upx;
			background-color: #fff;
			word-break: break-all;
			word-wrap: break-word;
			max-width: calc(100% - 100upx - 120upx);
			position: relative;


		}

		>video {
			position: relative;
			z-index: 2;
		}
	}

	.yesss {
		display: flex;
		justify-content: flex-end;
		align-items: self-end !important;
	}

	.nosss {
		align-items: self-end;
		flex-direction: column;
		// align-items: start !important;
	}

	/* #endif */
	.yesmar {
		margin-top: 40rpx;
	}

	.nomar {
		// margin-top: 0rpx !important;
	}

	.nickname {
		width: 300rpx;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏溢出的文本 */
		text-overflow: ellipsis;
		/* 当文本溢出时显示省略号 */
		font-weight: 400;
		font-size: 26rpx;
		color: #000;
		opacity: 0.6;
	}

	.titemo {
		display: flex;
		align-items: center;

		>image {
			// margin-left: 30rpx;
			margin-right: 40rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.list2 {
		width: 750rpx;
		height: 400rpx;
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 140rpx;

		.itemii {
			width: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			// height: 130rpx;
			>image {
				width: 100rpx;
				height: 100rpx;
			}

			>text {
				width: 100rpx;
				font-size: 26rpx;
				color: #A6A5AF;
				text-align: center;
			}
		}

	}

	.topsd {
		width: 690rpx;
		margin: 0 auto;
		/* #ifdef MP-WEIXIN */
		margin-top: 50rpx;
		/* #endif */

	}

	.question {
		width: 690rpx;
		color: #FFC300;
	}
	.tipsssss{
		width: 686rpx;
		height: 104rpx;
		background: #F7E9DE;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: center;
		
		font-weight: 250;
		font-size: 22rpx;
		color: #FA6E01;
		margin: 0  auto;
		
		>text{
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
		
	}
	.remind{
		width: 22rpx;
		height: 22rpx;
		margin-top: 26rpx;
		margin-left: 22rpx;
	}
</style>